"use client"
import React, { FC, useState } from "react"
import { Button } from "@/components/ui/button"
import { X, VectorSquare, MessageCircleMore, Zap } from "lucide-react"
import { Dialog, DialogContent, DialogTitle, DialogClose } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import Image from "next/image"
import { useToast } from "@/hooks/use-toast"

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
}

const appTypes = [
  {
    value: "workflow",
    label: "工作流",
    description: "创建自动化业务流程应用",
    icon: <VectorSquare className="w-6 h-6 text-white" />
  },
  {
    value: "chatflow",
    label: "Chatflow",
    description: "构建智能对话交互应用",
    icon: <MessageCircleMore className="w-6 h-6 text-white" />
  }
]

/**
 * 创建新应用弹窗
 */
const CreateNewApplicationDialog: FC<Props> = (props) => {
  const toast = useToast()
  const { open, onOpenChange } = props

  const [appType, setAppType] = useState("workflow")
  const [appName, setAppName] = useState("")
  const [appDescription, setAppDescription] = useState("")

  const handleCreateApp = () => {
    if (!appName.trim()) {
      toast.error({
        title: "应用名称不能为空"
      })
      return
    }
    console.log(appType, appName, appDescription)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="w-screen h-screen max-w-none max-h-none !rounded-none overflow-y-auto bg-gray-50 dark:bg-gray-900 [&>button]:hidden"
        aria-describedby={undefined}
        onInteractOutside={(e) => {
          if (e.target instanceof Element && e.target.closest("[data-sonner-toast]")) {
            e.preventDefault()
          }
        }}
      >
        <VisuallyHidden asChild>
          <DialogTitle>创建新应用</DialogTitle>
        </VisuallyHidden>
        <Card>
          <CardContent className="flex justify-center h-full overflow-y-auto overflow-x-hidden py-0">
            {/* 左侧表单区域 */}
            <div className="flex-1 flex justify-end border-r">
              <div className="px-10">
                <div className="w-full h-6 2xl:h-[140px]"></div>
                <div className="mb-5 text-xl font-bold">创建新应用</div>
                <div>
                  <div className="mb-3 text-sm">选择应用类型</div>
                  <div className="grid grid-cols-2 gap-4">
                    {appTypes.map((type) => (
                      <Card
                        key={type.value}
                        className={cn(
                          "cursor-pointer border",
                          appType === type.value ? "border-blue-800" : "border-muted"
                        )}
                        onClick={() => setAppType(type.value)}
                      >
                        <CardContent className="p-4 flex items-center space-x-3">
                          <div className="flex items-center space-x-3">
                            <div className="flex items-center justify-center w-9 h-9 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
                              {type.icon}
                            </div>
                          </div>
                          <div>
                            <div className="font-semibold">{type.label}</div>
                            <div className="text-sm text-muted-foreground">{type.description}</div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>

                <Separator className="my-5" />

                <div className="flex items-center">
                  <div className="flex-1">
                    <div className="mb-1">
                      <Label htmlFor="app-name">应用名称 & 图标</Label>
                    </div>
                    <Input
                      type="text"
                      id="app-name"
                      value={appName}
                      placeholder="应用名称"
                      onChange={(e) => setAppName(e.target.value)}
                    />
                  </div>
                  <div className="flex items-center ml-3">
                    <div className="flex items-center justify-center w-14 h-14 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
                      <Zap className="text-white w-10 h-10" />
                    </div>
                  </div>
                </div>
                <div className="my-5">
                  <div className="mb-3 text-sm">
                    <Label htmlFor="app-description">应用描述（可选）</Label>
                  </div>
                  <Textarea
                    id="app-description"
                    rows={4}
                    placeholder="输入应用的描述"
                    value={appDescription}
                    onChange={(e) => setAppDescription(e.target.value)}
                  />
                </div>

                <div className="flex justify-end pb-10">
                  <DialogClose asChild>
                    <Button variant="outline" onClick={() => onOpenChange(false)}>
                      取消
                    </Button>
                  </DialogClose>
                  <Button className="ml-3" onClick={handleCreateApp}>
                    创建
                  </Button>
                </div>
              </div>
            </div>

            {/* 右侧演示区域 */}
            <div className="flex-1">
              <div className="relative w-full h-6 2xl:h-[140px]">
                <DialogClose asChild>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="absolute -right-2 top-2"
                    onClick={() => onOpenChange(false)}
                  >
                    <X className="h-4 w-4" />
                    <span className="sr-only">关闭</span>
                  </Button>
                </DialogClose>
              </div>
              <div
                className="flex justify-center items-center w-[664px] h-[448px]"
                style={{
                  background:
                    "repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16, 24, 40, 0.04) 4px, transparent 3px, transparent 6px)"
                }}
              >
                {appType === "workflow" ? (
                  <Image src="/images/workflow.png" alt="workflow" width={664} height={448} />
                ) : (
                  <Image src="/images/chatflow.png" alt="chatflow" width={664} height={448} />
                )}
              </div>
            </div>
          </CardContent>
        </Card>
      </DialogContent>
    </Dialog>
  )
}

export default CreateNewApplicationDialog
